<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div *ngIf="targetFilter" class="ddp-dateinfo-view"
     [class.ddp-inline]="'WIDGET' === mode"
     [ngStyle]="'WIDGET' == mode ? {'margin-top':'1px', 'height' : '99%'} : {}">
  <div class="ddp-filter-calen">
    <div *ngFor="let item of timeRangeList;let idx = index;" class="ddp-filter-calen-in"
    [ngStyle]="'WIDGET' == mode ? {'float':'left'} : {}">
      <!-- wrap dateinfo -->
      <component-time-range
        [mode]="mode"
        [initial]="getTimeRangeData( item )"
        (onDateChange)="onDateChange($event, idx)">
      </component-time-range>
      <!-- // wrap dateinfo -->
      <!-- wrap control -->
      <div *ngIf="'WIDGET' !== mode" class="ddp-wrap-control">
        <!-- Earliest Control -->
        <div class="ddp-dateinfo-control">
          <!-- checkbox -->
          <label class="ddp-label-checkbox">
            <input (click)="setEarliestTime($event, targetFilter)" [checked]="isEarliestTime"
                   type="checkbox" >
            <i class="ddp-icon-checkbox"></i>
            <span class="ddp-txt-checkbox">{{ 'msg.board.filter.ui.earliest' | translate}}</span>
          </label>
          <!-- //checkbox -->
        </div>
        <!-- // Earliest Control -->
        <!-- Latest & Delete control -->
        <div class="ddp-dateinfo-control">
          <!-- checkbox -->
          <label class="ddp-label-checkbox">
            <input (click)="setLatestTime($event, targetFilter)" [checked]="isLatestTime"
                   type="checkbox" >
            <i class="ddp-icon-checkbox"></i>
            <span class="ddp-txt-checkbox">{{'msg.board.filter.ui.latest' | translate}}</span>
          </label>
          <!-- //checkbox -->
          <a (click)="deleteIntervalRange(targetFilter)" href="javascript:" class="ddp-icon-control-cut"></a>
        </div>
        <!-- // Latest & Delete control -->
      </div>
      <!-- //wrap control -->
    </div>
    <a *ngIf="'WIDGET' == mode" (click)="broadcastChange()"
       class="ddp-ui-button sys-btn-ok" href="javascript:" [class.sys-btn-large]="isVertical">
      {{'msg.comm.ui.ok' | translate}}
    </a>
  </div>
  <!-- add -->
  <a *ngIf="'WIDGET' !== mode" (click)="addIntervalRange(targetFilter)"
     [ngClass]="{'ddp-disabled' : isLatestTime}"
     href="javascript:" class="ddp-btn-add">Add period</a>
  <!-- add -->
</div>
